<template>
  <div>
    <p class="title">消息推送</p>
    <div class="btn">
      <el-button type="primary" size="small" @click="add">新建</el-button>

    </div>
    <div class="tab">
      <el-table :data="tableData" border>
        <el-table-column type="index" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="msgTitle" label="消息标题" align="center">
        </el-table-column>
        <el-table-column prop="msgContent" label="消息内容" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="pushNumber" label="推送人数" align="center"> </el-table-column>
        <el-table-column prop="readNumber" label="阅读数量" align="center"> </el-table-column>
        <el-table-column prop="msgTime" label="发送时间" align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="push(scope.row)">推送</el-button>
            <!-- 推送弹框 -->
            <el-dialog title="提示" center :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
              <p class="pushmsg">确认是否推送消息</p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
              </span>
            </el-dialog>
            <el-button type="text" @click="send(scope.row)">发送</el-button>
            <el-dialog title="提示" center :visible.sync="dialogVisible3" width="30%" :before-close="handleClose">
              <p class="pushmsg">确认是否发送消息</p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
              </span>
            </el-dialog>

            <el-button type="text" @click="ck(scope.row)">查看</el-button>

            <!-- 查看弹框 -->
            <el-dialog title="查看" center :visible.sync="dialogVisible2" width="50%" :before-close="handleClose">
              <div class="box1">
                <span>消息标题：</span>
                <p>基本更新版本1.1.1，如影响使用敬请见谅</p>
              </div>
              <div class="box1">
                <div class="msg">
                  <span>消息内容：</span>
                  <div>
                    <p>消息内容消息内容消息内容消息内容消息内容</p>
                    <div class="img">
                      <div>
                        <img src="" alt="" />
                      </div>

                      <div>
                        <img src="" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" :PageNumber.sync="pageNumber" :PageSize.sync="pageSize" @current-change="changeCurrentPage"
        @size-change="handleSizeChange">
      </Page>
    </div>
    <!-- 新建弹框 -->
    <el-dialog title="消息推送" center :visible.sync="dialogVisible5" width="50%" :before-close="handleClose">
      <div class="addtitle">
        <span>消息标题：</span>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
      <div class="addtitle">
        <span>消息内容：</span>
        <div class="richtext">
          <RichText />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible5 = false">保存</el-button>
        <el-button type="primary" @click="dialogVisible5 = false">推送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from "../../components/page.vue";
  import RichText from "../../components/RichText.vue";
  import message from "../../apis/modules/message"
  export default {
    components: {
      Page,
      RichText,
    },
    data() {
      return {

        content: "",//搜索内容
        pageNumber: 1,//当前页数
        pageSize: 10,//每页显示多少条
        total: 0,//总数
        tableData: [],//列表数据
        input: "",
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible5: false,
      };
    },
    created() {
      this.getSystemMsg()
    },
    methods: {

      async getSystemMsg() {
        const { code, data, msg } =await message.getSystemMsg({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        if (code == 200) {
          
          this.total = data.count;
          this.tableData = data.list;
        }
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getSystemMsg()
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getSystemMsg()
      },
      //   模态框关闭
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => { });
      },
      // 推送
      push(data) {
        console.log(data);
        this.dialogVisible1 = true;
      },
      // 查看
      ck(data) {
        console.log(data);
        this.dialogVisible2 = true;
      },
      // 发送
      send(data) {
        console.log(data, "send");
        this.dialogVisible3 = true;
      },
      add() {
        console.log(1);
        this.dialogVisible5 = true;
      }
    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .btn {
    text-align: right;
    margin-bottom: 16px;
  }

  .pushmsg {
    border: 1px solid #ccc;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .img {
    img {
      width: 216px;
      height: 170px;
      background-color: #ccc;
    }
  }

  .msg {
    display: flex;
  }

  .box1 {
    span {
      display: inline-block;
      width: 150px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }

    p {
      display: inline-block;
    }
  }

  .addtitle {
    display: flex;

    span {
      width: 100px;
      line-height: 40px;
    }

    .el-input {
      width: 300px;
    }
  }

  .richtext {
    width: 600px;
    margin-top: 16px;
  }
</style>